<template>
  <header class="header">
    <div>
      <div class="logo_box">
        <Imgt src="/img/header/logo.webp" class="home_logo" @click="router.push('/')" />
        <Imgt src="/img/header/fiba.webp" class="fiba" v-if="!isSearch" />
      </div>
      <div class="welcome">
        <Imgt src="/img/header/tips.webp" @click="router.push('/')" />
        <div class="title">
          <Notice :announcementList="textAnnouncement"></Notice>
        </div>
      </div>

      <div class="search" v-click-outside="onClickOutside" @click="search">
        <n-input size="large" :placeholder="!isSearch ? '' : '搜索'" :class="{ input_ac: isSearch }">
          <template #prefix>
            <iconpark-icon icon-id="gliconshous" size="1.2rem" class="input_icon"
              style="margin-left: 4px"></iconpark-icon>
          </template>
        </n-input>

        <!-- <Imgt src="/img/header/search.webp" @click="search" v-if="!isSearch" /> -->
      </div>
      <!--
      邮件收藏 -->
      <div class="email_wrap" v-if="hasLogin">
        <div class="email_main">
          <Imgt src="/img/header/email.webp" @click="clickItem(10, '/wallet/myEmail')" />
          <div class="email_dot" v-if="myEmail.hasNoRead"></div>
        </div>

        <Imgt src="/img/header/collect.webp" @click="router.push('/gameCollection')" />
      </div>

      <div class="login_wrap" v-if="!hasLoginNow">
        <div @click="onLoginOpen">{{ t('home_page_login') }}</div>
        <n-button @click="onRegisterOpen">{{ t('home_page_signUp') }}</n-button>
      </div>

      <!--
      主题色切换 -->
      <div class="theme">
        <Imgt v-if="theme == 'day'" src="/img/header/day.webp" @click="changeTheme('night')" />
        <Imgt v-else src="/img/header/night.webp" @click="changeTheme('day')" />
      </div>

      <!--
      账号信息 -->
      <div class="account" v-if="hasLoginNow">
        <div class="account_bit">
          <span>BIT</span>
          <Imgt src="/img/header/bit.webp" />
        </div>
        <div @click="router.push('/wallet/walletInfo')">
          {{ verifyNumberComma(String(roleInfo.money)) }}
        </div>
      </div>

      <!--
      头像 语言 -->
      <div class="avatar">
        <div>
          <n-popover trigger="hover" display-directive="show" :show-arrow="false" :disabled="!hasLogin">
            <template #trigger>
              <div class="avatar_wrap" @click="openAvatarDialog">
                <div class="avatar_logo">
                  <Imgt style="width: 100%;height: 100%;" @error="avatarLoadError" :src="avatarUrl" />
                  <!-- 审核状态 -->
                  <div class="avatar_status" v-if="sta == 1">
                    <span>{{ t('home_page_avatar_status1') }}</span>
                  </div>
                </div>

                <iconpark-icon icon-id="Group39340" color="#8e82c2" size="1rem"></iconpark-icon>


              </div>
            </template>
            <div class="menu_box">
              <p :class="menuActive == i ? 'active' : ''" v-for="(item, i) in menu" :key="i"
                @click="menuClick(item, i)">
                <iconpark-icon :icon-id="item.icon" size="1.2rem"></iconpark-icon>
                <span>{{ t(item.name) }}</span>
              </p>
            </div>
          </n-popover>
        </div>
        <div class="country_box">
          <n-popselect v-model:value="lang" :render-label="renderLabel" :options="settings.lang_list"
            @update:value="valueChange" trigger="click">
            <span>
              <Imgt :src="`/img/header/${lang}.webp`" alt="country" />
            </span>
          </n-popselect>
        </div>
      </div>

      <!--免费夺宝-->
      <n-modal v-model:show="isFreeModalVisible">
        <div>
          <FreeTreasureGrab />
        </div>
      </n-modal>

      <n-modal :show="isFirstDeposit" :mask-closable="false">
        <div>
          <FirstDeposit v-if="isFirstDeposit" />
        </div>
      </n-modal>
      <!--  优惠首存-->
      <n-modal :show="isFirstDeposit" :mask-closable="false">
        <div>
          <FirstDeposit v-if="isFirstDeposit" />
        </div>
      </n-modal>

      <!-- 弹窗登录 -->
      <n-modal :show="isLogin" :mask-closable="false">
        <div class="change_card1">
          <Login v-if="isLogin" />
        </div>
      </n-modal>
      <!-- 注册 -->
      <n-modal :show="isReg" :mask-closable="false">
        <div class="change_card1">
          <Register v-if="isReg" />
        </div>
      </n-modal>
      <!-- 忘记密码 -->
      <n-modal :show="isForget" :mask-closable="false">
        <div class="change_card1">
          <Forget v-if="isForget" />
        </div>
      </n-modal>
      <!-- 一般公告 -->
      <n-modal :show="isNotice" :mask-closable="false">
        <div>
          <NoticeDialog v-if="isNotice" />
        </div>
      </n-modal>
      <!-- 进入免费夺宝入口 -->
      <RegPop></RegPop>

      <!-- 头像设置 -->
      <avatarSettings @avatarStatus="avatarStatus" v-model:visible="visibleSetting" />
    </div>
    <RedeemCode v-if="showRedeemCode" />
  </header>
</template>

<script setup lang="ts" name="Header">
import {
  onUnmounted,
  onMounted,
  ref,
  defineAsyncComponent,
  reactive,
  h,
  computed,
} from 'vue';
import { MessageEvent2 } from '@/net/MessageEvent2';
import { NetMsgType } from '@/netBase/NetMsgType';
import { Local } from '@/utils/storage';
import { useRoute, useRouter } from 'vue-router';

import { Dialog, Message } from '@/utils/discreteApi';
import pinia from '@/store/index';
import { storeToRefs } from 'pinia';
import { Page } from '@/store/page';
import { User } from '@/store/user';
import { Wallet } from "@/store/wallet";
import { handleOpenLink, verifyNumberComma } from '@/utils/others';
import avatarSettings from '@/views/wallet/components/avatarSettings.vue';
import { useI18n } from 'vue-i18n';

import defaultAvatar from '/img/home/avatar.webp';
import {
  convertDateToObject,
  convertObjectToDateString,
} from '@/utils/dateTime';
// import { SelectRenderLabel } from 'naive-ui';

import Imgt from '@/components/Imgt.vue';
import useHeaderHooks from './useHooks';
import { SelectRenderLabel } from 'naive-ui';
import useClickOutSideHooks from '@/utils/vClickOutside';
import Notice from './notice.vue';
import RedeemCode from "@/views/wallet/components/RedeemCode.vue";
import { getLocale } from '@/main';


const Login = defineAsyncComponent(() => import('@/components/Login.vue'));
const Register = defineAsyncComponent(
  () => import('@/components/Register.vue'),
);
const RegPop = defineAsyncComponent(() => import('@/components/RegPop.vue'));
const NoticeDialog = defineAsyncComponent(
  () => import('@/components/NoticeDialog.vue'),
);
const FirstDeposit = defineAsyncComponent(
  () => import('@/components/firstDeposit.vue'),
);
const FreeTreasureGrab = defineAsyncComponent(
  () => import('@/components/FreeTreasureGrab/index.vue'),
);

const { vClickOutside } = useClickOutSideHooks();

const onClickOutside = () => {
  console.log('点击了外部 DOM');
  isSearch.value = false;
};

const { t } = useI18n();
const page = Page(pinia);
const { menuActive, settings, lang, textAnnouncement, isFreeModalVisible } =
  storeToRefs(page);
const wallet = Wallet(pinia);
const { showRedeemCode } = storeToRefs(wallet);
// import { Message } from "@/utils/discreteApi.ts";
// import { Search } from '@vicons/ionicons5'
const userInfo = User(pinia);
const {
  hasLogin,
  isLogin,
  isReg,
  isForget,
  roleInfo,
  kefuVisible,
  agentInfo,
  isNotice,
  myEmail,
  isFirstDeposit,
} = storeToRefs(userInfo);
const router = useRouter();
const route = useRoute();
const theme = ref('day');
const visibleSetting = ref(false);
// 判断是否登录
const hasLoginNow = computed(() => {
  const role_info = roleInfo.value?.id ? roleInfo.value : Local.get('roleInfo');
  return hasLogin.value || role_info?.id
})


// 头像状态
const sta: any = ref(2)
const avatarStatus = (val: any) => {
  const role_info = roleInfo.value?.id ? roleInfo.value : Local.get('roleInfo');
  if (role_info.head_photo.includes('.')) {
    sta.value = val
  } else {
    sta.value = 2
  }
}
// 用户头像
const avatarUrl: any = computed(() => {
  if (!hasLogin.value) return '/img/home/avatar.webp';
  const role_info = roleInfo.value?.id ? roleInfo.value : Local.get('roleInfo');
  if (!role_info?.id) return '/img/home/avatar.webp';
  if (role_info.head_photo.includes('.')) {
    return settings.value.upload_url + '/' + role_info.head_photo;
  }
  return `/img/head_icons/${role_info.head_photo}.webp`;
});
const openAvatarDialog = () => {
  if (!hasLogin.value) return User(pinia).setLogin(true);
  visibleSetting.value = true;
};
const state: any = reactive({
  userInfo: null,
  active: 0,
  slider: true,
});
const menu = [
  {
    icon: 'txxlicon01',
    name: 'page_route_wallet',
    url: '/wallet/walletInfo',
  },
  {
    icon: 'txxlicon02',
    name: 'page_route_recharge',
    url: '/wallet/deposit',
  },
  {
    icon: 'txxlicon03',
    name: 'page_route_withdraw',
    url: '/wallet/withdraw',
  },
  {
    icon: 'txxlicon04',
    name: 'page_route_VIP',
    url: '/wallet/levelInfo',
  },
  {
    icon: 'txxlicon05',
    name: 'page_route_proxy',
    url: '/wallet/proxyCooperation',
  },
  {
    icon: 'txxlicon06',
    name: 'page_route_payment',
    url: '/wallet/paymentManagement',
  },

  {
    icon: 'txxlicon07',
    name: 'page_route_activity',
    url: '/wallet/activity',
  },
  {
    icon: 'txxlicon08',
    name: 'page_route_discount',
    url: '/wallet/myPromo',
  },
  {
    icon: 'txxlicon15',
    name: 'page_route_record',
    url: '/wallet/records',
  },
  // {
  //   icon: 'txxlicon09',
  //   name: '奖励',
  //   url: '/wallet/myEmail',
  // },
  {
    icon: 'txxlicon10',
    name: 'page_route_redemptionCode',
    url: 'redeemCode',
  },
  {
    icon: 'txxlicon11',
    name: 'page_route_mail',
    url: '/wallet/myEmail',
  },
  {
    icon: 'txxlicon12',
    name: 'page_route_security',
    url: '/wallet/securitySettings',
  },
  {
    icon: 'txxlicon13',
    name: 'page_route_feedback',
    url: settings.value.serviceTelegram,
  },
  // {
  //   icon: "txxlicon13",
  //   name: "客服",
  //   url: settings.value.serviceTelegram,
  //   value: 666,
  // },
  {
    icon: 'txxlicon14',
    name: 'home_page_logout',
    url: '444',
    value: 444,
  },
];
const { search, isSearch } = useHeaderHooks();
const valueChange = async (item: any) => {
  await page.setLang(item);
};
// 跳转内页路由得方法需要优化 跟newMenu 重复了
const clickItem = async (i: number, url: string) => {
  if (!hasLogin.value) {
    await User(pinia).setLogin(true);
    return;
  }
  await Page(pinia).setMenuActive(i);
  router.push(url);
};
const avatarLoadError = (e: any) => {
  e.target.src = defaultAvatar;
};
const renderLabel: SelectRenderLabel = (option: any) => {
  return h('div', {}, t(option?.label));
};
// 主题色切换1
const changeTheme = (value: any) => {
  console.log(value);
  theme.value = value;
};
// 打开登录弹窗
const onLoginOpen = async () => {
  state.active = 1;
  await User(pinia).setLogin(true);
};
// 打开注册弹窗
const onRegisterOpen = async () => {
  state.active = 2;
  await User(pinia).setReg(true);
};

const menuClick = async (item: any, j: number) => {
  let str = item.url.substring(0, 4);
  if (item.value == 444) {
    return Dialog.warning({
      showIcon: false,
      title: t('home_page_logout'),
      content: t('home_page_confirmSignOut'),
      positiveText: t('home_page_confirm'),
      negativeText: t('home_page_cancel'),
      onPositiveClick: async () => {
        Local.remove('user');
        Local.remove('roleInfo');
        Local.set('menuActive', '');
        Local.set('menuName', '');
        await User(pinia).setHasLogin(false);
        location.href = '/';
      },
      onNegativeClick: () => { },
    });
  } else if (item.url == 'redeemCode') {
    // 兑换码
    showRedeemCode.value = true
  } else if (item.value == 666) {
    if ([2, 4].includes(agentInfo.value.mutetype.type_id)) {
      return Message.error('用户被封禁');
    } else {
      kefuVisible.value = true;
      return;
    }
  } else if (str === 'http' || str === 'www.') {
    handleOpenLink(item.url);
  } else {
    await page.setMenuActive(j);
    router.push(item.url);
  }
};

// const renderLabel: SelectRenderLabel = (option: any) => {
//   return h('div', {}, t(option.label))
// }
// const openLink = (item: any) => {
//   if (item.url) {
//     handleOpenLink(item.url)
//   }

// }

// wait页面跳转来的逻辑处理
const params: any = new URL(location.href).searchParams;
const paramsObj: any = {};
params.forEach((value: any, key: any) => {
  paramsObj[key] = value;
});
if (paramsObj.user_level) {
  // agent_level
  localStorage.setItem('agent_infodata', JSON.stringify(paramsObj));
  localStorage.setItem('agent_level', paramsObj.user_level);
  localStorage.setItem('device_id', paramsObj.device_id);
  // 缓存
  sessionStorage.setItem('agent_infodata', JSON.stringify(paramsObj));
  sessionStorage.setItem('agent_level', paramsObj.user_level);
  sessionStorage.setItem('device_id', paramsObj.device_id);
  // kefuVisible.value = true
  router.push('/customer');
} else {
  localStorage.setItem(
    'agent_level',
    sessionStorage.getItem('agent_level') || '',
  );
  localStorage.setItem(
    'agent_infodata',
    sessionStorage.getItem('agent_infodata') || '',
  );
  localStorage.setItem('device_id', sessionStorage.getItem('device_id') || '');
}

const onHander_system_notice = async (message: any) => {
  if (message.notice_list?.length) {
    const dialogList: any = message.notice_list.filter(
      (item: any) => item.position == 1,
    );

    const paomaList: any = message.notice_list.filter(
      (item: any) => item.position == 0,
    );

    // 弹窗公告
    let localIds = []; // 本地记录的不再显示
    try {
      localIds = JSON.parse(localStorage.getItem('readed_notice_ids') || '[]');
    } catch {
      localIds = [];
    }
    const list: any = dialogList
      .filter((item: any) => !localIds.includes(item.title))
      .sort((a: any, b: any) => {
        return b.priority - a.priority;
      });

    if (list.length) {
      await getLocale(settings.value); // 获取最新翻译文案
      setTimeout(() => {
        User(pinia).setNoticeList(list);
        User(pinia).setNotice(true);
      }, 1000);
    }

    // 轮播公告
    paomaList.forEach((item: any) => {
      page.setTextAnnouncementMore(t(item.title) + ' - ' + t(item.content));
    });
  }
};

// const avatarLoadError = (e: any) => {
//   e.target.src = defaultAvatar
// }
const onHandler_system_msg = async (m: any) => {
  if (m.code == 903) {
    if (m.Params[0] == 1) {
      // 弹窗公告
      try {
        const list: any = [
          {
            content: `${m.Params[3]}`,
            title: `${m.Params[2]}`,
            position: 1,
            priority: m.priority,
            type: m.Params[1],
          },
        ];
        await getLocale(settings.value); // 获取最新翻译文案

        setTimeout(() => {
          User(pinia).setNoticeList(list);
          User(pinia).setNotice(true);
        }, 1000);
      } catch {
        console.error('error msg', m);
      }
    } else {
      if (m.Params && m.Params.length == 6) {
        // 跑马灯
        // ***[0]*** 在 [3] 获得 [4] 金币奖励！
        const str = t('home_notice_mixtext', {
          user: `${m.Params[0]?.substr(0, 4)}***`,
          game: m.Params[3] ? t(m.Params[3]) : '',
          money: m.Params[4] ? Number(m.Params[4]).toLocaleString() : 0,
        });
        page.setTextAnnouncementMore(str);
      }
    }
  }
  // 高分
  if (m.code == 901) {
    if (m.Params && m.Params.length == 6) {
      // 跑马灯
      // ***[0]*** 在 [3] 获得 [4] 金币奖励！
      const str = t('home_notice_mixtext', {
        user: `${m.Params[0]?.substr(0, 4)}***`,
        game: m.Params[3] ? t(m.Params[3]) : '',
        money: m.Params[4] ? Number(m.Params[4]).toLocaleString() : 0,
      });
      page.setTextAnnouncementMore(str);
    }
  }
};

MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_loading_end,
  async () => {
    await User(pinia).setLoadingEnd(true);
  },
);

const getDeviceType = (device_id: any) => {
  if (device_id == 1) return 'WEB';
  if (device_id == 2) return 'Android';
  if (device_id == 3) return 'IOS';
  return t('else');
};
// 异地登录提醒
MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_diff_loc_login_notification,
  async (res: any) => {
    let ipText = res.ip;
    if (res.ip) {
      ipText = await getIP(res.ip);
    }
    // 您的账号上次在2024-05-28 19:20:02于xx的xx设备登录，如非本人操作，则密码可能泄露，建议您修改密码
    Dialog.warning({
      showIcon: false,
      maskClosable: false,
      title: t('home_page_diffOfflineTitle'),
      content: t('home_page_diffOfflineContent', {
        time: convertObjectToDateString(res.login_time),
        device: res.device_id ? getDeviceType(res.device_id) : '',
        ip: ipText,
      }),
      positiveText: t('home_page_modifyPassword'),
      negativeText: t('proxy_page_close'),
      onPositiveClick: () => {
        router.push({
          name: 'securitySettings',
        });
      },
      onNegativeClick: () => {
        // location.href = "/";
      },
    });
  },
);
const getIP = (ip: any) => {
  return new Promise((resolve) => {
    fetch(settings.value.geoip_api + ip)
      .then((response) => {
        if (!response.ok) {
          resolve('');
          throw new Error('Network response was not ok ' + response.statusText);
        }
        return response.json();
      })
      .then((res) => {
        if (res && res.data && res.data.country) {
          resolve(res.data.country);
        } else {
          resolve('');
        }
      })
      .catch(() => {
        resolve('');
      });
  });
};
// 下线提醒
let offlineDevice = ''; // 下线设备
let offlineTime = ''; // 下线时间
MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_offline_notification,
  async (res: any) => {
    offlineDevice = getDeviceType(res.device_id);
    offlineTime = convertObjectToDateString(res.login_time);
  },
);

if (location.href.includes('?relogin=1') && !Local.get('user')) {
  setTimeout(() => {
    User(pinia).setLogin(true);
  }, 1000)
}
// 重复登录
MessageEvent2.addMsgEvent(
  NetMsgType.msgType.msg_notify_repeat_login,
  async () => {
    Local.remove('user');
    Local.remove('roleInfo');
    Local.set('menuActive', '');
    Local.set('menuName', '');
    await User(pinia).setHasLogin(false);
    Dialog.warning({
      showIcon: false,
      maskClosable: false,
      title: t('home_page_offlineNotification'),
      content: t('home_page_offlineContent', {
        time:
          offlineTime ||
          convertObjectToDateString(convertDateToObject(new Date())),
        device: offlineDevice,
      }),
      positiveText: t('home_page_offlineConfirm'),
      onPositiveClick: async () => {
        // location.href = '/';
        offlineDevice = '';
        offlineTime = '';
        location.href = '/?relogin=1';

      },
      onClose: async () => {
        offlineDevice = '';
        offlineTime = '';
        location.href = '/';
      },
    });
  },
);
// Dialog.warning({
//   showIcon: false,
//   maskClosable: false,
//   title: '重复登录',
//   content: '您的账号上次在2024-05-28 19:20:02于另一台安卓手机登录，如非本人操作，则密码可能泄露，建议您修改密码',
//   positiveText: '修改密码',
//   negativeText: '关闭',
//   onPositiveClick: async () => {
//     Local.remove('user')
//     await User(pinia).setHasLogin(false)
//     router.push('/')
//   },
//   onNegativeClick: () => {

//   },
//   onClose: async () => {
//     Local.remove('user')
//     await User(pinia).setHasLogin(false)
//     router.push('/')
//   },
// })

// document.addEventListener("click", (el: any) => {
//   const className = el.target?.className;
//   console.log(44444444, className.indexOf("input"));
//   if (className.indexOf("input") == "-1") {
//     isSearch.value = false;
//   }
// });

onMounted(async () => {
  Local.set('agentid', route.query.uid || '0');
  if (Local.get('menuActive')) {
    await page.setMenuActive(Local.get('menuActive'));
  }

  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_send_system_notice,
    onHander_system_notice,
  );
  MessageEvent2.addMsgEvent(
    NetMsgType.msgType.msg_notify_sys_msg,
    onHandler_system_msg,
  );
});

onUnmounted(() => {
  MessageEvent2.removeMsgEvent(
    NetMsgType.msgType.msg_notify_check_version,
    null,
  );
});
</script>

<style lang="less" scoped>
@timestamp: `new Date() .getTime() `;

.header-bg-img {
  background-blend-mode: color-burn;
}

.country_box {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 20px;

  cursor: pointer;

  img {
    width: 32px;
    height: 24px;
    vertical-align: middle;
  }
}

.header {
  width: 100%;
  height: 95px;
  display: flex;
  justify-content: center;
  // border-bottom: 2px solid var(--c-border);
  position: relative;
  z-index: 100;

  >div {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .home_logo {
      height: 68px;
      width: 186px;
    }

    .fiba {
      width: 162px;
      height: 42px;
      margin-left: 11px;
    }

    .logo_box {
      display: flex;
      align-items: center;

      img {
        cursor: pointer;
      }
    }

    // justify-content: space-between;
    .welcome {
      width: 424px;
      height: 60px;
      margin-left: 30px;
      border-radius: 100px;
      background: #0b0b0b;
      display: flex;
      align-items: center;

      img {
        width: 77px;
        height: 66px;
      }

      .title {
        color: #9497a1;
        font-size: 20px;
        font-weight: 500;
        margin-left: 20px;
        white-space: nowrap;
      }
    }

    .search {
      display: flex;
      align-items: center;
      margin-left: 44px;

      img {
        width: 60px;
        height: 60px;
        cursor: pointer;
      }

      .input_ac {
        width: 260px !important;
        transition: all 1s ease;
      }

      .n-input {
        height: 60px;
        background: #000223;
        width: 60px;
        border: 1px solid #36445e;
        border-radius: 100px;
        will-change: width;
        transition: all 500ms;
        cursor: pointer;

        &:deep(.n-input-wrapper) {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        &:deep(.n-input__placeholder) {
          height: 60px;
          line-height: 60px;
          font-size: 20px;
          padding-left: 10px;

          span {
            height: 60px;
            line-height: 60px;
            font-size: 20px;
          }
        }

        &:deep(.n-input__input-el) {
          height: 60px;
          line-height: 60px;
          font-size: 20px;

          span {
            height: 60px;
            line-height: 60px;
            font-size: 20px;
          }
        }
      }
    }

    .email_wrap {
      display: flex;
      align-items: center;
      margin-left: 10px;

      img {
        width: 60px;
        height: 60px;
        margin-right: 10px;
        cursor: pointer;
      }
    }

    .login_wrap {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-left: 24px;
      width: 215px;

      div {
        word-break: keep-all;
        font-weight: 500;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }

      .login_btn {
        width: 142px;
        height: 52px;
        border-radius: 8px;
        line-height: 52px;
        text-align: center;
        font-weight: 500;
        color: #fff;
        font-size: 20px;
        background: linear-gradient(180deg, #5567ff 0%, #9e1eff 100%);
      }
    }

    .theme {
      margin-left: 20px;
      display: flex;
      align-items: center;

      img {
        width: 102px;
        height: 56px;
        cursor: pointer;
      }
    }

    .account {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #ffffff;
      font-size: 20px;
      margin-left: 10px;
      cursor: pointer;

      img {
        height: 30px;
        width: 30px;
      }

      .account_bit {
        display: flex;
        align-items: center;
      }
    }

    .avatar {
      display: flex;
      align-items: center;
      position: relative;

      .avatar_wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        position: relative;


      }

      .avatar_logo {
        margin-left: 20px;
        height: 53px;
        width: 53px;
        cursor: pointer;
        border-radius: 50%;
        position: relative;

        .avatar_status {
          background-color: rgba(0, 0, 0, 0.5);
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          color: #fff;

          span {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            white-space: nowrap;
          }
        }
      }
    }

    .user_box {
      text-align: end;

      >span {
        margin-right: 10px;
      }

      >.login_box {
        display: flex;
        justify-content: space-around;
        width: 180px;
        margin-left: 40px;
        color: #fff;

        >span {
          min-width: 62px;
          height: 32px;
          display: flex;
          font-size: 12px;
          justify-content: center;
          align-items: center;
          border-radius: 12px;
          padding: 0 10px;
          // border: solid 1px #5a47b2;
          // background-color: #402c95;

          border-image: url('/img/home/unactive1.webp?t=@{timestamp}') 0 30 0 30 fill / 0px 10px stretch stretch;
          // background-size: cover;
          cursor: pointer;
        }

        .active {
          border-image: url('/img/home/active1.webp?t=@{timestamp}') 0 30 0 30 fill / 0px 10px stretch stretch;
        }
      }
    }
  }

  .user_info {
    display: flex;
    align-items: center;

    .user_info_mon {
      font-size: 16px;
      cursor: pointer;
    }

    .info_options {
      span {
        display: flex;
        align-items: center;
        justify-content: center;
      }

      img {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        margin: 0 8px;
      }
    }

    >p {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 32px;
      margin: 0;
      padding: 1px;
      border-radius: 10px;
      background: linear-gradient(to top,
          #5734b4 -3%,
          #9d79ff 79%,
          #5734b4 97%);

      >span {
        display: flex;
        justify-content: space-around;
        align-items: center;
        border-radius: 10px;
        height: 32px;
        background: #131421;
        padding: 0 6px;
        color: #fff;

        >img {
          width: 24px;
          height: 24px;
        }
      }
    }
  }

  .menu {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    border: solid 1px #5a47b2;
    background-color: #402c95;
    cursor: pointer;
    color: #8e82c2;

    &:hover {
      border-image-source: linear-gradient(to bottom, #fff 0%, #8cacff 103%);
      border-image-slice: 1;
      background-image: radial-gradient(circle at 50% 0%,
          #1170ff,
          #1154ff 56%,
          #6b11ff 90%),
        linear-gradient(to bottom, #fff 0%, #8cacff 103%);
      background-origin: border-box;
      background-clip: content-box, border-box;
      color: #fff;
      border: none;
    }
  }
}

.text_color {
  font-size: 12px;
  color: #fff;
}

.menu_box {
  // width: 120px;
  display: flex;
  flex-direction: column;

  >p {
    color: #fff;
    padding: 10px 10px;
    margin: 0;
    // color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;

    >span {
      margin-left: 8px;
      font-size: 16px;
    }
  }

  .active {
    color: #8e82c2;
  }
}

.change_card1 {
  border-radius: 16px;
  border: 1px solid #26294c;
  background-color: #14173a;
}

.change_card {
  width: 494px;
  min-height: 415px;
  padding: 0 0 45px;
  border-radius: 14px;
  border: solid 1.4px #322c59;
  background-color: #231353;
}

.community_box {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #8e82c2;
  cursor: pointer;

  >span {
    margin-left: 12px;
  }
}

.email_main {
  position: relative;
  display: flex;
  align-items: center;

  .email_dot {
    position: absolute;
    top: 5px;
    right: 10px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: red;
    animation: dot-info-animal 1.6s infinite ease-in-out;
  }

  @keyframes dot-info-animal {
    0% {
      opacity: 0.3;
      transform: scale(0.9);
    }

    50% {
      opacity: 0.7;
      transform: scale(1.12);
    }

    100% {
      opacity: 0.3;
      transform: scale(0.9);
    }
  }
}
</style>
